<!-- 首页 -->
<template>
 	<view>
		<view class="home-wrap">
			<!-- 空白页 -->
			<!-- #ifdef APP-PLUS -->
			<u-no-network @retry="init"></u-no-network>
			<!-- #endif -->
			<!-- 分类选项卡 -->
			<view if="isConnected && isRefresh" class="">
				<view >
					<!-- 吸顶 -->
					<view class="u-sticky-wrap">
						<view class="u-sticky">
							<view class="tabs-wrap u-p-y-20"
								:style="isSticky ? 'border-bottom:1px solid #eee;background-color:#fff' : ''">
								<scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation
									:scroll-left="scrollLeft">
									<view class="u-flex u-row-cetner u-flex-1 u-col-center">
										<view class="tab-item u-flex-col u-col-center u-row-center"
											v-for="(item, index) in navigations_list" :key="index"
											@tap="tabChange(index)">
											<view class="tab-title u-m-y-6"
												:class="{ 'title-active': tabCur == index }">
												{{ item.name }}
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
		</view>
	</view>
	<view class="wrap">
		<view class="menu-category-box u-m-b-10"
			:style="childlist.length <= oneRowNum ? `height:180rpx` : `height:380rpx`">
			<swiper class="menu-swiper-box" @change="onSwiper" :style="childlist.length <= oneRowNum ? `height:180rpx` : `height:380rpx`" >
				<swiper-item class="menu-swiper-item"  v-for="(itemlist, index) in childlistitem" :key="index">
					<view class="menu-tab-box u-flex u-flex-wrap" style="display: flex;">
						<view class="tab-list u-flex-col u-col-center u-row-center"
							style="width:20%; "  
							v-for="(item, index) in itemlist" :key="index"
							@tap="tabchildChange(index)" v-if="item.hasContent">
							<image class="tab-img" :src="item.icon" ></image>
							<text class="tab-text" :class="{ 'detailtitle-active': detailtab == index }" >{{ item.name }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<view class="hot-goods u-m-b-10 u-p-x-16" >
		<view class="u-waterfall" style="display: flex;">
			<view id="u-left-column" class="u-column">
				<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="(leftGoods,index)  in leftList"
					:key="index">
					<ljshop-goods-card :detail="leftGoods" :type="leftGoods.activity_type" :image="leftGoods.large"
						:title="leftGoods.name" :subtitle="leftGoods.caption" :price="leftGoods.price.toFixed(2)"
						:originPrice="leftGoods.subsidy" :sales="leftGoods.sales"
						:tagTextList="leftGoods.activity_discounts_tags"
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id } })" v-if="leftGoods.type!='EXCHANGE'"> 
					</ljshop-goods-card>
				</view>
			</view>
			<view id="u-right-column" class="u-column" style="margin-left: 20rpx;">
				<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center" v-for="(rightGoods,index) in rightList"
					:key="index">
					<ljshop-goods-card :detail="rightGoods" :type="rightGoods.activity_type" :image="rightGoods.large"
						:title="rightGoods.name" :subtitle="rightGoods.caption" :price="rightGoods.price.toFixed(2)"
						:originPrice="rightGoods.subsidy" :sales="rightGoods.sales"
						:tagTextList="rightGoods.activity_discounts_tags"
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: rightGoods.id } })" v-if="rightGoods.type!='EXCHANGE'">
					</ljshop-goods-card>
				</view>
			</view>
		</view>
	</view> 
	<ljshop-empty v-if="isEmpty" :image="'https://image.hzwltb69.com/app/images/nogoods.png'" tipText="暂无该商品，还有更多好货等着你噢~">
	</ljshop-empty>
</view>
 
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';

	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';

	import shRichtext from './components/sh-richtext.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shSearch from './components/sh-search.vue';



	import homeHead from './index/home-head.vue';

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shBanner,
			shGridSwiper,
			shGroupon,
	   
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,

			
			homeHead,
	

			// #ifdef MP-WEIXIN
			shLive
			// #endif
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isRefresh: true,

				isConnected: true, //是否有网
				oneRowNum: 5,
				isScorll: false,
				categoryId: 0,
				navigations_list: [],
				fixed: false,
				height: 'auto',
				elClass: this.$u.guid(),
				left: 0,
				width: 'auto',
				stickyTop: 0,
				isSticky: false, //是否吸顶
				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: [],
				tabCur: 0,
				scrollLeft: 0,
				isEmpty: false,
				childcategoryId: 0,
				goodsList: [],
				tabCurrent: 0,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 0,
				lastPage: 0,
				childlist: [],
				childlistitem: [],
				rebate:0,
				detailtab:0,
				titleNmae:"",
				isAdding:false,
				hasMroe:true
				
			};
		},
		computed: {
			...mapGetters(['isLogin']),
			// 头部模块数据

		},
		// 触底加载更多
		onReachBottom() {
			if(!this.isAdding){
				if (this.hasMroe) {
					this.currentPage += 1;
					
					this.getGoodsList();
				}
			}
			
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			this.init();
			uni.setNavigationBarTitle({
				title: this.titleNmae
			})
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			const type = this.$Route.query.id;
			this.titleNmae=this.$Route.query.name;
			
			this.categoryId = type;

		},
		methods: {
			init() {
				let that = this
				that.$http('category.modeldetaillist', {
					Ids: that.categoryId
				}).then(res => {
					 
					that.navigations_list = res.cateList;
					that.childlist = res.cateList[0].children;
					 
					that.initChild();
					that.childcategoryId = res.cateList[0].children[0].id;
					that.getGoodsList()
				});
			},
			async splitData() {

				if (!this.tempList.length) {
					this.isAdding = false
				};
				if(this.tempList.length==1){
					this.isAdding = false
				}
				let item = this.tempList[0];
				if (!item) return;

				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += 330;
					item.subsidy =((item.price-item.cost)*this.rebate/100).toFixed(2);
					this.leftList.push(item);
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += 330;
					item.subsidy =((item.price-item.cost)*this.rebate/100).toFixed(2);
					this.rightList.push(item);
				} else {
					this.leftHeight += 330;
					item.subsidy =((item.price-item.cost)*this.rebate/100).toFixed(2);
					this.leftList.push(item);
				}

				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
				

			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.tempList = [];
			},

			// 吸顶相关
			initObserver() {
				if (!this.enable) return;
				// #ifdef APP-PLUS || H5
				this.stickyTop = systemInfo.statusBarHeight + 44;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				let top = systemInfo.statusBarHeight + height;
				this.stickyTop = systemInfo.statusBarHeight + height;
				// #endif
				this.disconnectObserver('contentObserver');

				this.$uGetRect('.' + this.elClass).then(res => {
					this.height = res.height;
					this.left = res.left;
					this.width = res.width;
					this.$nextTick(() => {
						this.observeContent();
					});
				});
			},
			observeContent() {
				this.disconnectObserver('contentObserver');
				const contentObserver = this.createIntersectionObserver({
					thresholds: [0.95, 0.98, 1]
				});
				contentObserver.relativeToViewport({
					top: -this.stickyTop
				});
				contentObserver.observe('.' + this.elClass, res => {
					if (!this.enable) return;
					this.setFixed(res.boundingClientRect.top);
				});
				this.contentObserver = contentObserver;
			},
			setFixed(top) {
				const fixed = top < this.stickyTop;
				if (fixed) {
					this.isSticky = true;
				} else if (this.fixed) {
					this.isSticky = false;
				}
				this.fixed = fixed;
			},
			disconnectObserver(observerName) {
				const observer = this[observerName];
				observer && observer.disconnect();
			},

			// 商品列表
			getGoodsList() {
				let that = this;
				this.isAdding=true
				that.$http('goods.indexcatelist', {
					productCategoryId: that.childcategoryId,
					page: that.currentPage
				}).then(res => {
					
					if (res.code == 1) {
						if(that.currentPage ==0 && res.productList.length==0){
							that.isEmpty =true
						}
						if(res.productList.length<20){
							this.hasMroe = false;
						}
						if(that.currentPage==0){
							this.isRefresh = false;
							that.goodsList = res.productList;
							that.tempList = res.productList;
							that.rebate = res.rebate;
							that.goodsList.length && that.splitData();
						}
						else{
							 
							that.rebate = res.rebate;
							that.goodsList = that.goodsList.concat(res.productList)
							that.tempList = that.tempList.concat(res.productList)
							that.goodsList.length && that.splitData();
						}
						
					}
				});
			},
			// tabs
			tabChange(index) {
				this.tabCur = index;
				this.scrollLeft = (index - 1) * 60;
				this.childcategoryId = this.navigations_list[index].children[0].id;
				this.childlist = this.navigations_list[index].children;
				this.childlistitem=[];
				this.initChild();
				this.clear();
				this.goodsList = [];
				this.currentPage = 0;
				this.lastPage = 0;
				this.isEmpty=false
				this.loadStatus = 'loadmore';
				this.getGoodsList();
			},
			tabchildChange(index){
				 
				this.detailtab = index
				this.isEmpty=false
				this.childcategoryId = this.childlist[index].id;
				this.clear();
				this.styleType === 1 && this.clear();
				this.goodsList = [];
				this.currentPage = 0;
				this.lastPage = 0;
				this.loadStatus = 'loadmore';
				this.getGoodsList();
			},
			initChild(){
				let that = this
				let allList=[];
				for(let i =0;i<that.childlist.length;i++){
					if(i%8!=7){
						//console.info(i+"aaaaaa")
						allList.push(that.childlist[i])
						if(i==that.childlist.length-1){
							that.childlistitem.push(allList);
						}
					}
					else{
						//console.info(i+"bbbbbb")
						allList.push(that.childlist[i])
						that.childlistitem.push(allList);
						allList =[];
					}
					
				}
				//console.info(JSON.stringify(that.childlist))
				//console.info(JSON.stringify(that.childlistitem))
				 
			},
		}
	};
</script>


<style lang="scss" scoped>
// 产品分类
.menu-category-box,
.menu-swiper-box {
	position: relative;
	background: #fff;
	.menu-swiper-item {
		background: #fff;
		height: 100%;
		width: 100%;
	}
	.menu-tab-box {
		.tab-list {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin: 20rpx 0;
			.tab-img {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
				 
			}
			.tab-text {
				font-size: 26rpx;
			
			}
		}
	}

	.menu-category-dots {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10rpx;

		.category-dot {
			width: 12rpx;
			height: 12rpx;
			background: #eeeeee;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.category-dot-active {
			width: 12rpx;
			height: 12rpx;
			background: #e9b461;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
}
	
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.category-tabs-wrap {
	min-height: 1000rpx;
	// 吸顶
	.u-sticky-wrap {
		background-color: #fff;
	}
	// 瀑布流
	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}
}
.detailtitle-active{
	color: #D44C1C;
}
// 滑动分类
.tabs-content {
	white-space: nowrap;
	.tab-item {
		display: inline-block;
		margin: 0 10rpx;
		padding: 0 20rpx;
		.tab-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}
		.title-active {
			color: #D44C1C;
		}
		.tab-des {
			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
			text-align: center;
		}
		.des-active {
			background: linear-gradient(90deg, #e9b461, #eecc89);
			border-radius: 15rpx;
			padding: 2rpx 10rpx;
			color: #ffffff;
		}
	}
}
</style>

